<template>
	<view>
		<view class="content">
			<u-swiper :list="bannerList" height="200" indicator indicatorMode="dot" indicatorInactiveColor="#8df"
				indicatorStyle="bottom: 10px;"></u-swiper>
			<view>
				<u-tabs :list="tablist" lineColor="#0bc5ae" :current="current" :activeStyle="{
                    fontWeight: 'bold',
                }" :scrollable="false" @click="click"></u-tabs>
			</view>
	<!-- 		<view v-for="(item, index) in itemList" :key="index">
				<view class="order-card" @click="onItemClick(item.serverId)">
					<view class="title-and-status">
						<view class="title-left">
							<view class="title-main">
								{{ item.serverValue }}
							</view>
						</view>
						<view class="status-box">
							<view class="status">
								<span style="font-weight: normal"></span>
								<span class="status-price">￥{{ item.halfRrice }}</span>
							</view>
			
						</view>
					</view>
					<view class="item-tag" style="margin-bottom: 25rpx">
						<view class="service-tag" :key="idx" v-for="(service, idx) in item.categoryValueList">
							{{ service }}
						</view>
					</view>
				</view>
			</view> -->
			
			 <!-- 医院列表区域 -->
			    <view class="hospital-list-section">
			      <view class="section-header">
			        <text class="section-title">医院列表</text>
			        <text class="more-btn">更多 ></text>
			      </view>
			
			      <!-- 医院列表项 -->
			      <view class="hospital-item" v-for="(hospital, index) in hospitalList" :key="index">
			        <image class="hospital-img" :src="hospital.hospitalImg" mode="aspectFill"></image>
			        <view class="hospital-info"  @click="onHospitalClick(hospital)">
			          <view class="tag-group">
			            <view class="tag hospital-level">{{ hospital.hospitalLevel }}</view>
			          </view>
			          <view class="hospital-name">{{hospital.hospitalName}}</view>
			          <view class="department-list">
			            <text v-for="(dept, i) in hospital.hospitalDepartments" :key="i" class="dept-tag">{{dept}}</text>
			          </view>
			          <view class="hospital-intro">医院简介:{{hospital.hospitalIntroduce | ellipsis}}</view>
			          <view class="hospital-type">
			            <text v-for="(type, i) in hospital.types" :key="i" class="type-tag">{{type}}</text>
			          </view>
			        </view>
			      </view>
			    </view>
		</view>
	</view>
</template>

<script>
import {
	    getNurseHospital,
		getVisitServe
	} from "../../common/api/index.js"
	import { getToken } from "@/utils/auth.js"
	export default {
		components: {},
		data() {
			return {
				hospitalList: [],
				token: getToken(),
				tabbarValue: 0,
				titles: ["护士上门", "消息", "订单"],
				bannerList: ["https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/banner.png"], //轮播图
				gridList: [],
				tablist: [],
				current: 0,
				itemList: [],
			}
		},
		filters: {
		    ellipsis(value){
		      if (!value) return '';
		      if (value.length > 5) {
		        return value.slice(0,15) + '...'
		      }
		      return value
		    }
		},
		
		mounted() {
			this.initServe()
		},
		methods: {
			onItemClick(serverId) {
				if (!this.token) {
					uni.showToast({
						icon: 'none',
						title: '请重新登录!',
						delay: 1500
					})
					setTimeout(() => {
						uni.setStorageSync("nav_to_index_index", 1)
						uni.reLaunch({ url: "/pages/index/index" })
					}, 2000)
					return
				}
				let code = this.gridList[this.current].code
				let title = this.gridList[this.current].title
				if(code === "visit"){
					// uni.navigateTo({
					// 	url: `/nursingWorkerPages/pages/CompanionVisit/CompanionVisit?code=${code}&serverId=${serverId}`,
					// })
					uni.navigateTo({
						url: `/nursingWorkerPages/pages/CompanionVisit/visitDetil?code=${code}&serverId=${serverId}`,
					})
				}else{
					uni.navigateTo({
						url: `/nursingWorkerPages/pages/itemDetail/itemDetail?code=${code}&serverId=${serverId}`,
					})		
				}
			
			},
			onHospitalClick(hospital) {
				console.log("hospitalName",hospital.hospitalName )
					uni.navigateTo({
						url: `/nursingWorkerPages/pages/hospital/hospitail?hospitalName=${hospital.hospitalName}&id=${hospital.id}`,
					})
			},
			initServe() {
				getVisitServe().then((res) => {
					let data = res.data.data
					this.gridList = data
				
					this.itemList = this.gridList[this.current].nurseServersList
					this.tablist = data.map((item, index) => {
						let disabled = false
						return {
							name: item.title,
							disabled: disabled,
						}
					})
				}),
				getNurseHospital().then((res) => {
					let data = res.data.data
					this.hospitalList =data
				})
			},
			click(item) {
				console.log("item", item)
				this.current = item.index
				this.itemList = this.gridList[this.current].nurseServersList

			},
		},
	};
</script>

<style lang="scss" scoped>
	.grid {
		padding: 15rpx;
		margin: 15rpx 0;

		.catalogue-title {
			font-size: 30rpx;
			margin: 10rpx 0;
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 700;
			padding-left: 25rpx;
			// background: url(../../static/icon_rect.png) left center no-repeat;
			background-size: 15rpx auto;
			margin-left: 10rpx;
		}
	}

	.grid-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.grid .grid-list:first-child .grid-item:nth-child(1) {
		// background: url('/nursingWorkerPages/static/bg-1.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:first-child .grid-item:nth-child(2) {
		// background: url('/nursingWorkerPages/static/bg-2.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:first-child .grid-item:nth-child(3) {
		// background: url('/nursingWorkerPages/static/bg-3.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:first-child .grid-item:nth-child(4) {
		// background: url('/nursingWorkerPages/static/bg-4.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:nth-child(2) .grid-item:nth-child(1) {
		// background: url('/nursingWorkerPages/static/bg-5.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:nth-child(2) .grid-item:nth-child(2) {
		// background: url('/nursingWorkerPages/static/bg-6.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:nth-child(2) .grid-item:nth-child(3) {
		// background: url('/nursingWorkerPages/static/bg-7.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:nth-child(2) .grid-item:nth-child(4) {
		// background: url('/nursingWorkerPages/static/bg-8.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.grid .grid-list:nth-child(2) .grid-item:nth-child(5) {
		// background: url('/nursingWorkerPages/static/bg-9.png') center center no-repeat;
		background-size: 100% 100%;
	}
	/* 医院列表区域 */
	.hospital-list-section {
	  padding: 0 20rpx;
	}
	
	.section-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 20rpx 0;
	}
	
	.section-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.more-btn {
	  font-size: 28rpx;
	  color: #999;
	}

	/* 医院列表项 */
	.hospital-item {
	  display: flex;
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 20rpx;
	  margin-bottom: 20rpx;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.hospital-img {
	  width: 180rpx;
	  height: 180rpx;
	  border-radius: 8rpx;
	  margin-right: 20rpx;
	}
	
	.hospital-info {
	  flex: 1;
	}
	
	.tag-group {
	  margin-bottom: 10rpx;
	}
	
	.tag {
	  display: inline-block;
	  padding: 4rpx 12rpx;
	  font-size: 24rpx;
	  color: #fff;
	  border-radius: 4rpx;
	}
	
	.hospital-level {
	  background-color: #4a9eff;
	}
	
	.hospital-name {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 10rpx;
	}
	
	.department-list {
	  margin-bottom: 10rpx;
	}
	
	.dept-tag {
	  display: inline-block;
	  font-size: 24rpx;
	  color: #666;
	  margin-right: 10rpx;
	}
	
	.hospital-intro {
	  font-size: 26rpx;
	  color: #666;
	  line-height: 1.4;
	  margin-bottom: 10rpx;
	}
	
	.hospital-type {
	  display: flex;
	  flex-wrap: wrap;
	}
	
	.type-tag {
	  font-size: 24rpx;
	  color: #666;
	  margin-right: 10rpx;
	}
	
	/* 底部导航栏 */
	.tab-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 100rpx;
	  background-color: #fff;
	  display: flex;
	  border-top: 1rpx solid #eee;
	  z-index: 100;
	}
	
	.tab-item {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  font-size: 24rpx;
	  color: #999;
	}
	
	.tab-icon {
	  width: 44rpx;
	  height: 44rpx;
	  margin-bottom: 6rpx;
	}
	
	.tab-item.active {
	  color: #4a9eff;
	}

	.grid-item {
		width: 340rpx;
		margin: 5px;
		padding: 20rpx;
		box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
		// background-size: 100% 100%;
		border-radius: 5rpx;

		.grid-title {
			color: #14141c;
			font-size: 26rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.grid-introduce {
			color: #a8b4b6;
			display: -webkit-box;
			display: -ms-flexbox;
			height: 40px;
			overflow: hidden;
			font-size: 25rpx;
			line-height: 20px;
		}
	}

	.order-card {
		margin-right: 30rpx;
		margin-left: 30rpx;
		background: white;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.title-and-status {
			display: flex;
			width: 100%;
			justify-content: space-between;

			.title-left {
				display: flex;
				justify-content: flex-start;
				width: 65%;
				align-items: flex-end;

				.title-main {
					color: #333333;
					font-size: 35rpx;
					font-weight: 700;
					margin-right: 10rpx;
				}

				.subhead {
					color: #747474;
					font-size: 28rpx;
				}
			}

			.time {
				flex: 1;
				color: rgba(35, 35, 35, 0.7);
				font-size: 26rpx;
			}

			.status-box {
				display: flex;
				justify-content: center;
				align-items: center;

				.status {
					font-size: 35rpx;
					font-weight: 700;
					color: #333333;

					.status-price {
						color: #ffb35b;
					}
				}

				.status-line {
					font-size: 28rpx;
					font-weight: 700;
					color: #bdbdbd;
					text-decoration: line-through;
					margin-left: 10rpx;
					text-align: center;

					.status-price {
						color: #bdbdbd;
					}
				}
			}
		}

		.item-tag {
			display: flex;
			justify-content: flex-start;
			// width: 80%;
			align-items: center;
			margin-top: 20rpx;
			flex-wrap: wrap;
			min-height: 130rpx;

			.service-tag {
				min-width: 110rpx;
				background-color: #eafaf5;
				font-size: 20rpx;
				color: #6f7070;
				padding: 10rpx;
				height: 50rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 25rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.cycle-and-price {
			display: flex;
			justify-content: space-between;
			font-size: 25rpx;
			color: #6c6c6c;
			margin-top: 10rpx;

			.cycle {
				width: 80%;
			}

			.price {}
		}

		.project-row {
			display: flex;
			align-items: center;
			margin-top: 36rpx;

			.img {
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
			}

			.name {
				color: #232323;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 24rpx;
			}
		}

		.info-row {
			display: flex;
			margin-top: 40rpx;

			.name {
				width: 136rpx;
				color: rgba(35, 35, 35, 0.7);
				font-size: 26rpx;
			}

			.value {
				color: #232323;
				font-size: 26rpx;
			}
		}

		.div-line {
			width: 100%;
			height: 2rpx;
			background: #f8f8f8;
			margin-top: 40rpx;
		}

		.price-and-pay {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.left {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.cancel-btn {
				width: 150rpx;
				height: 60rpx;
				border: solid 2rpx rgba(35, 35, 35, 0.26);
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(35, 35, 35, 0.8);
				font-size: 26rpx;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}

			.ok-btn {
				width: 150rpx;
				height: 60rpx;
				border: solid 2rpx #0bc5ae;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #0bc5ae;
				font-size: 26rpx;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>
